<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>17_鼠标拖拽-浏览器默认行为-dom2-拖拽文字</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            div {
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div>尚硅谷</div>

        <script>
            var div = document.querySelector('div');

            div.addEventListener('mousedown',function(event){
                var eleX = div.offsetLeft;
                var eleY = div.offsetTop;

                var startX = event.clientX;
                var startY = event.clientY;

                function f1(event){
                    event.preventDefault();
                    var endX = event.clientX;
                    var endY = event.clientY;

                    var disX = endX - startX;
                    var disY = endY - startY;

                    var lastX = eleX + disX;
                    var lastY = eleY + disY;

                    div.style.left = lastX + 'px';
                    div.style.top = lastY + 'px';

                }

                document.addEventListener('mousemove',f1);

                function f2(){
                    document.removeEventListener('mousemove',f1);
                    document.removeEventListener('mouseup',f2);
                }

                document.addEventListener('mouseup',f2);
            })
        </script>
    </body>
</html>